<template>
  <!-- 移动端菜单组件：提供移动端的汉堡菜单功能 -->
  <div class="mobile-menu">
    <!-- 汉堡菜单按钮：控制移动端菜单的展开/收起 -->
    <button class="hamburger-btn" @click.stop="toggleMenu" :class="{ active: isOpen }" type="button">
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
      <span class="hamburger-line"></span>
    </button>

    <!-- 移动端菜单遮罩：点击遮罩关闭菜单 -->
    <div class="menu-overlay" :class="{ active: isOpen }" @click="closeMenu"></div>

    <!-- 移动端菜单内容：包含用户信息、导航链接和搜索框 -->
    <div class="menu-content" :class="{ active: isOpen }">
      <!-- 菜单头部：显示用户头像和用户名 -->
      <div class="menu-header">
        <div class="user-info">
          <!-- 用户头像 -->
          <div class="user-avatar">
            <img src="/src/assets/pic/avatar.jpg" alt="用户头像" />
          </div>
          <!-- 用户名 -->
          <span class="user-name">零の守墓人</span>
        </div>
      </div>

      <!-- 移动端导航菜单：包含所有主要页面的导航链接 -->
      <nav class="mobile-nav">
        <!-- 首页导航链接 -->
        <router-link to="/" class="mobile-nav-link" @click="closeMenuAndScrollToTop">
          <el-icon>
            <House />
          </el-icon>
          <span>首页</span>
        </router-link>
        <!-- 分类下拉菜单：可展开显示子分类 -->
        <div class="mobile-nav-link" @click="toggleCategory">
          <el-icon>
            <Folder />
          </el-icon>
          <span>分类</span>
          <el-icon class="arrow" :class="{ rotated: categoryOpen }">
            <ArrowDown />
          </el-icon>
        </div>
        <!-- 分类子菜单：显示具体的分类选项 -->
        <div class="category-submenu" :class="{ active: categoryOpen }">
          <router-link to="/category/tech" class="submenu-link" @click="closeMenu">技术</router-link>
          <router-link to="/category/life" class="submenu-link" @click="closeMenu">生活</router-link>
          <router-link to="/category/thoughts" class="submenu-link" @click="closeMenu">感想</router-link>
        </div>
        <!-- 时间线导航链接 -->
        <router-link to="/timeline" class="mobile-nav-link" @click="closeMenu">
          <el-icon>
            <Clock />
          </el-icon>
          <span>时间线</span>
        </router-link>
        <!-- 留言板导航链接 -->
        <router-link to="/guestbook" class="mobile-nav-link" @click="closeMenu">
          <el-icon>
            <ChatDotRound />
          </el-icon>
          <span>留言板</span>
        </router-link>
        <!-- 博主导航链接 -->
        <router-link to="/about" class="mobile-nav-link" @click="closeMenu">
          <el-icon>
            <UserFilled />
          </el-icon>
          <span>博主</span>
        </router-link>
        <!-- 友链导航链接 -->
        <router-link to="/friends" class="mobile-nav-link" @click="closeMenu">
          <el-icon>
            <Link />
          </el-icon>
          <span>友链</span>
        </router-link>
      </nav>

      <!-- 菜单底部：包含搜索框功能 -->
      <div class="menu-footer">
        <!-- 移动端搜索框 -->
        <div class="search-box">
          <el-input v-model="searchText" placeholder="搜索文章..." class="mobile-search" :prefix-icon="Search" clearable />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// ==================== 导入依赖 ====================

/**
 * 导入Vue 3组合式API
 * @description 用于响应式数据管理、生命周期管理和DOM操作
 */
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue'

/**
 * 导入Vue Router
 * @description 用于获取当前路由信息
 */
import { useRoute } from 'vue-router'

/**
 * 导入Element Plus图标组件
 * @description 用于移动端菜单中的各种图标显示
 */
import { User, House, Folder, Clock, ChatDotRound, UserFilled, Link, Search, ArrowDown } from '@element-plus/icons-vue'

// ==================== 响应式数据 ====================

/**
 * 移动端菜单的显示状态
 * @description 控制移动端菜单的展开/收起，true为展开，false为收起
 */
const isOpen = ref(false)

/**
 * 分类子菜单的显示状态
 * @description 控制移动端菜单中分类子菜单的展开/收起
 */
const categoryOpen = ref(false)

/**
 * 搜索框的输入内容
 * @description 用于存储用户在移动端搜索框中输入的搜索关键词
 */
const searchText = ref('')

/**
 * 获取当前路由实例
 * @description 用于监听路由变化，自动关闭菜单
 */
const route = useRoute()

// ==================== 交互方法 ====================

/**
 * 切换移动端菜单的显示状态
 * @description 控制移动端菜单的展开/收起，同时处理body滚动
 */
const toggleMenu = () => {
  // 切换菜单显示状态
  isOpen.value = !isOpen.value

  // 根据菜单状态控制body滚动
  if (isOpen.value) {
    // 菜单展开时禁止body滚动
    document.body.style.overflow = 'hidden'
  } else {
    // 菜单收起时恢复body滚动
    document.body.style.overflow = ''
  }
}

/**
 * 关闭移动端菜单
 * @description 关闭菜单并恢复body滚动
 */
const closeMenu = () => {
  // 关闭菜单
  isOpen.value = false
  // 恢复body滚动
  document.body.style.overflow = ''
}

/**
 * 切换分类子菜单的显示状态
 * @description 控制移动端菜单中分类子菜单的展开/收起
 */
const toggleCategory = () => {
  // 切换分类子菜单显示状态
  categoryOpen.value = !categoryOpen.value
}

/**
 * 关闭菜单并滚动到页面顶部
 * @description 点击首页链接时关闭菜单并滚动到页面顶部
 */
const closeMenuAndScrollToTop = () => {
  // 关闭菜单
  closeMenu()
  // 滚动到页面顶部
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}

// ==================== 生命周期钩子 ====================

/**
 * 组件挂载时的初始化操作
 * @description 监听路由变化，自动关闭菜单
 */
onMounted(() => {
  // 监听路由变化，自动关闭菜单
  watch(() => route.path, () => {
    if (isOpen.value) {
      closeMenu()
    }
  })
})

/**
 * 组件卸载时的清理操作
 * @description 确保组件卸载时恢复body滚动
 */
onUnmounted(() => {
  // 确保组件卸载时恢复body滚动
  document.body.style.overflow = ''
})
</script>

<style scoped lang="scss">
// 导入移动端菜单样式
@use '../assets/styles/components/_mobile-menu';
</style>